<template>
  <div class="common-header">
    <div class="logo"> EASYLOGO </div>
    <div class="nav">
      <Menu :menu-mode="'horizontal'" :menus="headerMenu" />
    </div>
    <div class="user">
      <!-- TODO userInfo.avantor || -->
      <img :src="logo" alt="avantor" />
      <span class="ellips" :title="userInfo.realname || '未登录'">{{ userInfo.realname || '未登录' }}</span>
      <span v-if="userInfo.realname" class="exit" @click="handleLogout"><i class="iconfont icon-tuichudenglu"></i></span>
      <span class="to-login" v-else @click="router.push({ path: '/login' })">登录</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed } from 'vue';
  import logo from '@/assets/images/avantar.png';
  import Menu from '@/components/common-menu/Menu.vue';
  import { headerMenu } from '@/menus/index';
  import { useRouter } from 'vue-router';
  import { useMainStore } from '@/store';
  const router = useRouter();
  const mainStore = useMainStore();
  // 声明数据

  const userInfo = computed(() => mainStore.userInfo);

  // 操作方法
  const handleLogout = () => {
    localStorage.removeItem('login-store');
    mainStore.$patch({
      token: '',
      userInfo: {
        username: '', // 用户名
        realname: '', // 真实姓名
        sex: '', // 性别
        phone: '', // 电话
        email: '', // 邮箱
        birth: '', // 出生日期
        avantor: '', // 头像
      },
    });
    router.push({ path: '/login' });
  };
</script>

<style lang="scss" scoped>
  .common-header {
    height: $headerHeight;
    font-size: 20px;
    color: $white;
    display: flex;
    > .logo {
      height: $headerHeight;
      line-height: $headerHeight;
      letter-spacing: 2px;
      font: {
        size: 22px;
      }
      > img {
        height: 100%;
        vertical-align: middle;
      }
    }

    > .nav {
      flex: 1;
      margin-left: 100px;
    }
    > .user {
      height: calc($headerHeight - 20px);
      padding: 10px;

      > img {
        height: calc($headerHeight - 20px);
        width: calc($headerHeight - 20px);
        border-radius: 50%;
        float: left;
      }
      > span {
        float: left;
        max-width: 100px;
        padding: 0 10px;
        line-height: calc($headerHeight - 20px);
        font-size: 14px;
      }
      .exit {
        cursor: pointer;
        > i {
          font-size: 22px;
        }
        &:hover {
          color: $blue;
        }
      }

      .to-login {
        cursor: pointer;
        &:hover {
          color: skyblue;
        }
      }
    }
  }
</style>
